<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="sur1">
    <select name="" id="jis">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="text" id="sur2">
    <button id="jisuan">计算</button>
    <!-- <p>结果为: <span id="jeiguo"></span> </p> -->
    <div id="jeiguo"></div>
</body>

</html>
<script>
    var jisuan = document.getElementById('jisuan');
    jisuan.onclick = function() {
        var text1 = document.getElementById('sur1');
        var text2 = document.getElementById('sur2');
        var fuhao = document.getElementById('jis');
        var jeiguo = document.getElementById('jeiguo');
        var text11 = text1.value - 0,
            text22 = text2.value - 0,
            fuhao1 = fuhao.value;
        console.log(text11);
        console.log(text22);
        console.log(fuhao1, typeof fuhao1);

        switch (fuhao1) {
            case "+":
                var a = text11 + text22;
                console.log(a);
                jeiguo.innerHTML = a;
                break;
            case "-":
                var a = text11 - text22;
                console.log(a);
                jeiguo.innerHTML = a;
                break;
            case "*":
                var a = text11 * text22;
                console.log(a);
                jeiguo.innerHTML = a;
                break;
            case "/":
                var a = text11 / text22;
                console.log(a);
                jeiguo.innerHTML = a;
                break;
            case "%":
                var a = text11 % text22;
                console.log(a);
                jeiguo.innerHTML = a;
                break;

            default:
                break;
        }

    }
</script>